<!-- // 消息通知布局 -->
<script lang="ts" setup>
import { BellOutlined } from '@vicons/antd'
import type { DropdownOption } from 'naive-ui'
import Footer from './module/footer.vue'
import Content from '~/layouts/notify/content.vue'

withDefaults(
  defineProps<{
    count?: number
    maxCount?: number
  }>(),
  {
    count: 0,
    maxCount: 99,
  },
)

const options = ref<DropdownOption[]>([
  { key: 'content', type: 'render', render: () => h(Content) },
  { key: 'header-divider', type: 'divider' },
  { key: 'footer', type: 'render', render: () => h(Footer) },
])
</script>

<template>
  <n-dropdown :options="options" trigger="click">
    <div class="flex cursor-pointer">
      <n-badge :max="maxCount" :value="count">
        <n-icon class="text-[var(--n-text-color)]" size="18">
          <BellOutlined />
        </n-icon>
      </n-badge>
    </div>
  </n-dropdown>
</template>

<style scoped></style>
